<template>
  <el-card shadow="hover" class="layout-padding-auto">
    <div class="help-top">
      <div class="back" @click="backGZT">←返回上一层</div>
      <el-button
        size="default"
        type="primary"
        plain
        class="ml10"
        @click="usersManual"
      >
        用户手册下载
      </el-button>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="TabChange">
      <el-tab-pane label="视频教程" name="1">
        <el-row class="row">
          <el-col :span="3">
            <el-menu
              :default-active="defaultActive"
              class="el-menu-vertical-demo"
              background-color="#fff"
              text-color="#2B2B2B"
              active-text-color="#02AD82"
              popper-effect="light"
            >
              <el-menu-item
                v-for="(itemChild, index) in menuData"
                :key="itemChild.id"
                :index="itemChild.id"
                class="titleLabel"
                @click="itemClick(itemChild.moduleName, itemChild.id)"
              >
                {{ itemChild.moduleName }}
              </el-menu-item>
            </el-menu>
          </el-col>
          <div class="col-divider">
            <el-divider direction="vertical" class="divider" />
          </div>
          <el-col :span="19">
            <el-input
              v-model="keyword"
              class="w-50 m-2"
              placeholder="可输入名称搜索"
              :prefix-icon="Search"
              @input="getVedioList(moduleId)"
              style="width: 250px; margin-bottom: 15px"
            />
            <VedioList
              :dataList="dataList"
              @broadcast="broadcast"
              v-if="!broadFlag"
            ></VedioList>
            <VedioBroadcast
              :broadcastId="broadcastId"
              v-else
              @videoBack="videoBack"
            ></VedioBroadcast>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="常见问题" name="2">
        <el-row class="row">
          <el-col :span="3">
            <el-input
              v-model="keyword2"
              class="w-50 m-2"
              style="margin-bottom: 16px"
              placeholder="可输入名称搜索"
              :prefix-icon="Search"
              @input="getModuleList2()"
            />
            <QuestionMenu
              :menuData="menuData"
              :defaultActive="defaultActive"
              @itemClick2="itemClick2"
            >
            </QuestionMenu>
          </el-col>
          <div class="col-divider">
            <el-divider direction="vertical" class="divider" />
          </div>
          <el-col :span="10">
            <div class="questionTitle">{{ infoForm.problemName }}</div>
            <div v-html="infoForm.solution"></div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<!-- <script src="https://player.polyv.net/script/player.js"></script> -->
<script setup lang="ts">
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineAsyncComponent
} from 'vue'
import {
  businessPageListApi,
  getInfoApi,
  getModuleListApi,
  getUserManualApi,
  pageListApi,
  webPageListApi,
  getModuleList2Api
} from '/@/api/help'
import { Calendar, Search } from '@element-plus/icons-vue'
import router from '/@/router'
import { ElMessage } from 'element-plus'
const VedioList = defineAsyncComponent(
  () => import('./components/VedioList.vue')
)
const VedioBroadcast = defineAsyncComponent(
  () => import('./components/VedioBroadcast.vue')
)
const QuestionMenu = defineAsyncComponent(
  () => import('./components/QuestionMenu.vue')
)
const keyword = ref('')
const keyword2 = ref('')
const menuData = ref<any>([])
const moduleName = ref('')
const activeName = ref('1')
const defaultActive = ref('')
const broadFlag = ref(false)

const getModuleList = () => {
  getModuleList2Api(activeName.value, 1).then((res) => {
    if (res.code == 0) {
      menuData.value = res.data
      defaultActive.value = menuData.value[0].id
      moduleId.value = menuData.value[0].id
      moduleName.value = menuData.value[0].moduleName
      getVedioList(defaultActive.value)
    }
  })
}

const getModuleList2 = () => {
  let params = {
    pn: 1,
    ps: 10,
    terminal: 1,
    keyword: keyword2.value
  }
  businessPageListApi(params).then((res) => {
    if (res.code == 0) {
      menuData.value = res.data
      defaultActive.value = menuData.value[0].commonProblemList[0].id
      itemClick2(defaultActive.value)
    }
  })
}

const TabChange = (val: any) => {
  if (val == '1') {
    getModuleList()
  } else if (val == '2') {
    getModuleList2()
  }
  keyword.value = ''
  keyword2.value = ''
}

//视频教程
const vedioList = ref<any>([])
const dataList = ref<any>([])
const getVedioList = (val: any) => {
  let params = {
    pn: 1,
    ps: 10,
    terminal: 1,
    moduleId: val,
    keyword: keyword.value
  }
  webPageListApi(params).then((res) => {
    if (res.code == 0) {
      dataList.value = res.data
      // vedioList.value.forEach((v: any) => {
      //   if (v.moduleId == menuData.value[0].moduleId) {
      //     dataList.value = v.videoCourseList
      //   }
      // })
    }
  })
}

const moduleId = ref('')
const itemClick = (name: any, id: any) => {
  broadFlag.value = false
  keyword.value = ''
  moduleName.value = name
  moduleId.value = id
  dataList.value = []
  getVedioList(id)
}

const broadcastId = ref('')
const broadcast = (val: any) => {
  broadcastId.value = val
  broadFlag.value = !broadFlag.value
}
const videoBack = () => {
  broadFlag.value = !broadFlag.value
}

//常见问题
const infoForm = ref<any>({})
const itemClick2 = (id: any) => {
  getInfoApi(id).then((res) => {
    if (res.code == 0) {
      infoForm.value = res.data
    }
  })
}

//用户手册下载
const usersManual = () => {
  getUserManualApi().then(async (res) => {
    if (res.code == 0) {
      if (res.data == '') {
        ElMessage.warning('暂无可下载的用户手册')
      } else {
        // window.open(res.data.configValue)
        let response = await fetch(res.data.configValue)
        let blob = await response.blob()
        let objectUrl = window.URL.createObjectURL(blob)
        let a = document.createElement('a')
        a.href = objectUrl
        a.download = res.data.configName
        a.click()
        a.remove()
      }
    }
  })
}

const backGZT = () => {
  router.go(-1)
}

onMounted(() => {
  getModuleList()
})
</script>
<style scoped lang="scss">
.help-top {
  display: flex;
  justify-content: space-between;

  .back {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(140, 140, 140, 1);
    margin-bottom: 20px;
    cursor: pointer;
  }
}

.vedioBox {
  width: 33%;

  .vedioShow {
    width: 100%;
    height: 224px;
  }
}

.row {
  display: flex;
  height: 100%;

  .col-divider {
    padding-left: 10px;

    .divider {
      height: 100%;
      padding-left: 10px;
    }
  }
}

// 鼠标 hover 时颜色
.el-menu-hover-bg-color {
  // background-color: var(--next-bg-menuBarActiveColor) !important;
  background-color: transparent !important;
}

.el-menu {
  border-right: none !important;
  width: 100%;
}

.el-menu-item {
  margin: 4px !important;
  height: 36px !important;
  line-height: 36px !important;
}

.el-menu-item:hover {
  background: rgba(2, 173, 130, 0.1) !important;
}

.el-menu-item.is-active {
  margin: 4px !important;
  border-radius: 4px !important;
  background: rgba(2, 173, 130, 0.1) !important;
}

.el-menu-item,
.el-sub-menu__title {
  // color: var(--next-bg-menuBarColor);
  // color:var(--el-color-primary) !important;
  color: #4d4d4d !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
.el-menu-item.is-active,
.el-sub-menu.is-active .el-sub-menu__title,
.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
  // @extend .el-menu-hover-bg-color;
  // background: black !important;
  color: var(--el-color-primary) !important;
}

.el-menu-item:hover {
  @extend .el-menu-hover-bg-color;
  // color:skyblue !important;
}

::v-deep .el-sub-menu.is-active.is-opened .el-sub-menu__title {
  /* // background-color: var(--el-color-primary) !important; */
  background: rgba(2, 173, 130, 0.1) !important;
  border-radius: 4px;
}

.questionTitle {
  font-weight: 400;
  margin-bottom: 16px;
}
</style>
<style>
.el-tabs__item.is-active {
  font-weight: 700 !important;
  font-size: 18px !important;
}

.el-tabs__active-bar {
  height: 4px !important;
}
</style>
